<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<title>CSS的示例</title>
	<style>
		p span
		{
			border: thin #000000 solid;
			padding: 4px;;
		}

		::first-line
		{
			background-color: #808080;
			color: #ffff00;
		}

		::first-letter
		{
			background-color: #0000ff;
			color: #ffffff;
			border: thin black solid;
			padding: 4px;
		}

		div:before
		{
			content: "这是用伪元素实现的！";
		}
		div:after
		{
			content: "这也是伪元素实现的！";
		}
		/*
		 * 下面这个选择符来选择body的第二个元素
		 */
		body > :nth-child(2)
		{
			background-color: #000040;
		}
		/*
		 * 下面选择倒数第一个p元素
		 */
		p:nth-last-of-type(1)
		{
			background-color: #0000BF;
		}
		p:nth-last-of-type(1):after
		{
			 content: "前面是本块元素中的倒数第一个p元素";
		}

		/*
		 * 下面是一个复选框的:checked伪类选择器，为了使说明文字变化，使用了兄弟选择器
		 */
		:checked + span
		{
			background-color: red;
			color: #ffffff;
			padding: 5px;
		border: medium solid #000000;
		}

		:target
		{
			border:thin black solid;
			padding: 4px;
			color: red;;
		}
	</style>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<!-- 定义页头 -->
<header>
	<h1>直接子元素</h1>
</header>

<!-- 定义边栏，书写说明或者放致导航菜单 -->
<aside>
	<nav>
		<ul>

		</ul>
	</nav>
</aside>
<!-- 定义页面内容 -->
<div id="container">
	<p>I like <span lang="en-uk" class="class2">apples这是一个直接子元素<span>这是一个间接子元素</span></span> and oranges.</p>
</div>
<div>
	<label for="apples"><input type="checkbox" id="apples" /><span>This will go red when checked.</span></label>
	<a href="http://apress.com">Visit the Apress websit</a>
	<p id="mytarget">这是一个有id属性的p元素，如果通过本页URL#mytarget来访问，就会匹配:target</p>
	<a id="w3clink" href="http://w3.org">visit the w3c websit</a>
	<p>这也是一个文本块的首行。</p>
</div>
<!-- 页面内容结束 -->
<!-- 定义页尾 -->
<footer>

</footer>
<!-- JavaScript脚本链接请在此处插入 -->
</body>
</html>